<template>
  <ve-form-item v-bind="$attrs">
    <slot name=tag>
      <view
        class="member-name-tag"
        :class="[memberInfo.memberLabel == 2 ? 'success' : 'danger']"
        v-if="memberInfo.memberLabel == 2 || memberInfo.memberLabel == 3"
      >
        {{ memberInfo.memberLabelName }}
      </view>
    </slot>
    <template #icon>
      <ve-tooltip style="margin-left: -20rpx; line-height: 28rpx">
        <template #content>
          <view>如承租人姓名或联系电话有误需要修改，</view>
          <view>请到个人会员中修改， 或创建完成后，</view>
          在订单编辑页中进行修改。
        </template>
        <view style="padding-left: 14rpx">
          <ve-icon name="help" size="32" />
        </view>
      </ve-tooltip>
    </template>
    <slot></slot>
  </ve-form-item>
  <view v-if="showUploadDriverBtn || showUploadIdCardBtn" class="memberInfoBox">
    <ve-form-item :labelWidth="0" v-if="showUploadDriverBtn" prop="driverFile" :borderBottom="false" label="">
      <ve-button type="plain" size="mini" @click="uploadDriverLicenseFn">未上传驾驶证</ve-button>
    </ve-form-item>
    <ve-form-item :labelWidth="0" v-if="showUploadIdCardBtn" prop="idCardFile" :borderBottom="false" label="">
      <ve-button style="margin-left: 20rpx" type="plain" size="mini" @click="uploadIdCardFn"> 未上传身份证明 </ve-button>
    </ve-form-item>
    <!-- <ve-button v-if="showUploadDriverBtn" type="plain" size="mini" @click="uploadDriverLicenseFn">未上传驾驶证</ve-button>
    <ve-button
      style="margin-left: 20rpx; margin-top: 10rpx"
      v-if="showUploadIdCardBtn"
      type="plain"
      size="mini"
      @click="uploadIdCardFn"
    >
      未上传身份证明
    </ve-button> -->
  </view>
</template>
<script setup>
  defineProps({
    memberInfo: Object,
    showUploadDriverBtn: Boolean,
    showUploadIdCardBtn: Boolean,
    memeberType: Number,
  })
  const emit = defineEmits(['uploadDriverLicenseFn', 'uploadIdCardFn'])
  const uploadDriverLicenseFn = () => {
    emit('uploadDriverLicenseFn')
  }
  const uploadIdCardFn = () => {
    emit('uploadIdCardFn')
  }
</script>
<style lang="less" scoped>
  .memberInfoBox {
    display: flex;
    justify-content: flex-end;
  }
  .member-name-tag {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    background: #ffece8;
    border-radius: 16rpx;
    margin-right: 16rpx;
    opacity: 1;
    font-weight: 500;
    text-align: center;
    padding: 0 16rpx;
    flex-shrink: 0;
    &.danger {
      background: #ffece8;
      color: #f53f3fff;
    }
    &.success {
      background: #e8ffea;
      color: #00b42aff;
    }
  }
</style>
